@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

$typography: map.get(gio.$mat-theme, typography);

.accordion {
  display: block;
  padding-left: 20px;
  border-left: 1px solid map.get(gio.$mat-dove-palette, darker20);

  &__header {
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
    width: 100%;
    cursor: pointer;

    &__titles {
      display: flex;
      flex-direction: row;
      align-items: center;

      &__title {
        margin: 0 8px 0 0;
      }

      &__subtitle {
        @include mat.typography-level($typography, body-2);
        color: mat.get-color-from-palette(gio.$mat-space-palette, 'lighter40');
      }
    }
  }
}
